<template>
  <div class="app-container">
    <el-container class="collective" style="width:100%;height:810px;">
      <el-main class="right" style="width:82%;margin-left:10px;overflow:hidden;background:#fff">
        <div style="width:100%;height:450px;border:1px solid #f5f5f5;">
          <div style="width:75%;height:100%;float:left;">
            <div class="right" style="width:100%;height:40px;">
              <el-tabs v-model="activeName">
                <el-tab-pane label="按人员批量新增" name="first" />
                <el-tab-pane label="集体计件(均摊)" name="second" />
                <el-tab-pane label="集体计件(按系数分摊)" name="third" />
                <el-tab-pane label="按出勤时间分摊" name="fourth" />
              </el-tabs>
            </div>
            <div style="width:100%">
              <div
                class="form"
                style="width:100%;height:400px;overflow:auto;float:left;padding:20px 0px;border-right:1px solid #f5f5f5;"
              >
                <el-form
                  ref="ruleForm2"
                  :model="ruleForm2"
                  :rules2="rules2"
                  label-width="100px"
                  class="demo-ruleForm2"
                  style="width:100%"
                >
                  <el-form-item label="产品名称" prop="ProductName">
                    <el-input v-model="ruleForm2.ProductName">
                      <i slot="suffix" class="el-icon-search" @click="getProductData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="产品工序" prop="ProcedureName">
                    <el-input v-model="ruleForm2.ProcedureName">
                      <i slot="suffix" class="el-icon-search" @click="getProcessData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="订单名称" prop="OrderName">
                    <el-input v-model="ruleForm2.OrderName">
                      <i slot="suffix" class="el-icon-search" @click="getOrderData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="计时" prop="HourlyQuantity">
                    <el-input
                      v-model="ruleForm2.HourlyQuantity"
                      onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                      :disabled="disabled"
                      @change="computedTiming"
                    />
                  </el-form-item>
                  <el-form-item label="产品编号" prop="ProductCode">
                    <el-input v-model="ruleForm2.ProductCode" disabled />
                  </el-form-item>
                  <el-form-item label="工序编号" prop="ProcedureCode">
                    <el-input v-model="ruleForm2.ProcedureCode" disabled />
                  </el-form-item>
                  <el-form-item label="订单编号" prop="OrderCode">
                    <el-input v-model="ruleForm2.OrderCode" disabled />
                  </el-form-item>
                  <el-form-item label="日期" prop="PieceworkDate">
                    <el-date-picker
                      v-model="ruleForm2.PieceworkDate"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%;"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      :disabled="disabled"
                    />
                  </el-form-item>
                  <el-form-item label="产品规格" prop="Spec">
                    <el-input v-model="ruleForm2.Spec" :disabled="disabled" />
                  </el-form-item>
                  <el-form-item label="工序单价" prop="ProcedureUnitPrice">
                    <el-input v-model="ruleForm2.ProcedureUnitPrice" disabled />
                  </el-form-item>
                  <el-form-item label="单据编号" prop="PieceworkCode">
                    <el-input v-model="ruleForm2.PieceworkCode" disabled />
                  </el-form-item>
                  <el-form-item label="计件数量" prop="PieceQuantity">
                    <el-input
                      v-model="ruleForm2.PieceQuantity"
                      onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                      :disabled="disabled"
                      @change="computedPiece"
                    />
                  </el-form-item>

                  <el-form-item label="工时单价" prop="ManHourUnitPrice">
                    <el-input v-model="ruleForm2.ManHourUnitPrice" disabled />
                  </el-form-item>
                  <el-form-item label="成本核算单位" prop="CostingUnit">
                    <el-input v-model="ruleForm2.CostingUnit" disabled />
                  </el-form-item>
                  <el-form-item label="计件金额" prop="PieceAmount">
                    <el-input v-model="ruleForm2.PieceAmount" disabled />
                  </el-form-item>
                  <el-form-item label="损耗数量" prop="LossQuantity">
                    <el-input
                      v-model="ruleForm2.LossQuantity"
                      onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                      :disabled="disabled"
                      @change="computedLose"
                    />
                  </el-form-item>
                  <el-form-item label="扣款不良率" prop="DeductionDefectRate">
                    <el-input v-model="ruleForm2.DeductionDefectRate" disabled />
                  </el-form-item>
                  <el-form-item label="计时金额" prop="HourlyAmount">
                    <el-input v-model="ruleForm2.HourlyAmount" disabled />
                  </el-form-item>
                  <el-form-item label="损耗金额" prop="LossAmount">
                    <el-input v-model="ruleForm2.LossAmount" disabled />
                  </el-form-item>
                  <el-form-item label="损耗单价" prop="LossUnitPrice">
                    <el-input v-model="ruleForm2.LossUnitPrice" disabled />
                  </el-form-item>

                  <el-form-item label="计件不良率" prop="PieceDefectRate">
                    <el-input v-model="ruleForm2.PieceDefectRate" disabled />
                  </el-form-item>
                  <el-form-item label="小计" prop="PieceSubPieceDefectRate">
                    <el-input v-model="ruleForm2.PieceDefectRate" disabled />
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div style="width:25%;height:400px;float:left;position:relative;padding:4px 0">
            <el-input
              class="query"
              type="text"
              style="width:100px;margin-right:15px;"
              suffix-icon="el-icon-search"
              @focus="queryEmployees"
            />
            <el-button
              type="primary"
              size="small"
              class="el-icon-plus"
              :disabled="disabled1"
              @click="addData"
            >新增</el-button>
            <el-button
              type="success"
              size="small"
              class="el-icon-mobile"
              :disabled="disabled2"
              @click="saveData"
            >保存</el-button>
            <el-button
              type="danger"
              size="small"
              class="el-icon-back"
              :disabled="disabled2"
              @click="undoData"
            >撤销</el-button>
            <el-table
              ref="employeesTable"
              height="365px"
              style="width:100%;overflow:auto;margin-top:5px;"
              :data="employeesData"
              @row-click="selectPeopleRow"
            >
              <el-table-column type="selection" :reserve-selection="true" width="55" />
              <el-table-column property="employeesCode" label="员工编号" />
              <el-table-column property="employees" label="员工姓名" />
              <el-table-column property="OrgID" label="部门" />
            </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pagesize"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <el-container style="width:100%;height:330px;">
          <i
            class="el-icon-d-arrow-left"
            style="float:left;margin-top:8px;width:20px;height:320px"
            @click="hiddenTable"
          />
          <el-aside width="auto" height="320px">
            <el-table
              v-show="showTable ===0"
              height="320px"
              style="width:300px;overflow:auto;float:right;border-right:2px solid #f5f5f5"
              :data="leftData"
              @row-click="showChildren"
            >
              <el-table-column property="index" label="单据编号" />
              <el-table-column property="PieceworkDate" label="日期" width="125" />
              <el-table-column property="PieceQuantity" label="数量" width="100" />
              <el-table-column property="totalNumber" label="人数" width="100" />
            </el-table>
          </el-aside>
          <el-main>
            <el-table
              :data="rightData"
              highlight-current-row
              height="320px"
              style="overflow:auto;float:left;"
              border
            >
              <el-table-column prop="PieceworkCode" label="单据编号" width="120" />
              <el-table-column prop="employeesCode" label="人员编号" width="100" />
              <el-table-column prop="employees" label="员工姓名" width="100" />
              <el-table-column prop="OrgID" label="部门" width="100" />
              <el-table-column prop="PieceworkDate" label="日期" width="125" />
              <el-table-column prop="ProductCode" label="产品编号" width="120" />
              <el-table-column prop="ProductName" label="产品名称" width="120" />
              <el-table-column prop="Spec" label="产品规格" width="100" />
              <el-table-column prop="ProcedureCode" label="工序编号" width="120" />
              <el-table-column prop="ProcedureName" label="产品工序" width="120" />
              <el-table-column prop="PieceQuantity" label="计件数量" width="100" />
              <el-table-column prop="OrderCode" label="订单编号" width="120" />
              <el-table-column prop="OrderName" label="订单名称" width="100" />
              <el-table-column prop="HourlyQuantity" label="计时" width="100" />
              <el-table-column prop="LossQuantity" label="损耗数量" width="100" />
              <el-table-column prop="ProcedureUnitPrice" label="工序单价" width="100" />
              <el-table-column prop="ManHourUnitPrice" label="工时单价" width="100" />
              <el-table-column prop="LossUnitPrice" label="损耗单价" width="100" />
              <el-table-column prop="CostingUnit" label="成本核算单位" width="120" />
              <el-table-column prop="PieceAmount" label="计件金额" width="100" />
              <el-table-column prop="HourlyAmount" label="计时金额" width="100" />
              <el-table-column prop="LossAmount" label="损耗金额" width="100" />
              <el-table-column prop="DeductionDefectRate" label="扣款不良率" width="100" />
              <el-table-column prop="PieceDefectRate" label="计件不良率" width="100" />
              <el-table-column prop="PieceDefectRate" label="小计" width="100" />
            </el-table>
          </el-main>
        </el-container>
        <el-button type="primary" size="small" style="float:right;clear:both">全部提交</el-button>
        <!-- 输入框的各种查询按钮事件的弹框 -->
        <el-dialog
          title="快捷搜索框"
          :visible.sync="Dialog"
          :show-close="false"
          width="65%"
          custom-class="customWidth"
        >
          <generalDialogTable
            v-if="open == 2"
            :radio="radio"
            :tableHead="productHead"
            :general-data="productData"
            @selectRow="selectRow"
          ></generalDialogTable>
          <generalDialogTable
            v-if="open == 3"
            :radio="radio"
            :tableHead="processHead"
            :general-data="processData"
            @selectRow="selectRow"
          ></generalDialogTable>
          <generalDialogTable
            v-if="open == 4"
            :radio="radio"
            :tableHead="orderHead"
            :general-data="orderData"
            @selectRow="selectRow"
          ></generalDialogTable>

          <div slot="footer" class="dialog-footer" style="margin-bottom:20px;">
            <el-button size="small" @click="cancel">取 消</el-button>
            <el-button size="small" type="primary" @click="sure">确定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import generalDialogTable from './components/generalDialogTable'
export default {
  components: { generalDialogTable },
  data () {
    return {
      leftData: [],
      rightData: [],
      open: -1,
      disabled: true, // 控制页面一渲染就禁用input框
      disabled1: false, // 控制按钮的禁用
      disabled2: true, // 控制按钮的禁用
      Dialog: false,
      radio: -1,
      showTable: 0,
      currentRow: '',
      employeesData: [],
      productData: [],
      productHead: [],
      processData: [],
      processHead: [],
      orderData: [],
      orderHead: [],
      activeName: 'first',
      queryValue: '',
      ruleForm2: {
        PieceworkCode: '',
        PieceworkDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
        ProductCode: '',
        ProductName: '',
        Spec: '',
        ProcedureCode: '',
        ProcedureName: '',
        PieceQuantity: '',
        OrderCode: '',
        OrderName: '',
        HourlyQuantity: '',
        LossQuantity: '',
        ProcedureUnitPrice: '',
        ManHourUnitPrice: '',
        LossUnitPrice: '',
        CostingUnit: '',
        PieceAmount: '',
        HourlyAmount: '',
        LossAmount: '',
        DeductionDefectRate: '',
        PieceDefectRate: ''
      },
      rules2: {
        PieceworkCode: [{ required: true, message: '单据编号是必填项', trigger: 'blur' }],
        ProductCode: [{ required: true, message: '产品编号是必填项', trigger: 'change' }],
        ProcedureCode: [{ required: true, message: '工序编号是必填项', trigger: 'change' }]
      },
      total: 0, // 总条数
      pagesize: 7, // 每页的条数
      currentPage: 1 // 默认开始页面
    }
  },
  watch: {},
  mounted () {
    this.productHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '产品编号', property: 'ProductCode' },
      { label: '产品名称', property: 'ProductName' },
      { label: '产品规格', property: 'Spec' }
    )
    this.processHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '工序编号', property: 'ProcedureCode' },
      { label: '产品工序', property: 'ProcedureName' },
      { label: '产品编号', property: 'ProductCode' },
      { label: '产品名称', property: 'ProductName' },
      { label: '产品规格', property: 'Spec' },
      { label: '工序单价', property: 'ProcedureUnitPrice' },
      { label: '工时单价', property: 'ManHourUnitPrice' },
      { label: '损耗单价', property: 'LossUnitPrice' },
      { label: '扣款不良率', property: 'DeductionDefectRate' },
      { label: '成本核算单位', property: 'CostingUnit' }
    )
    this.orderHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '订单编号', property: 'OrderCode' },
      { label: '订单名称', property: 'OrderName' }
    )
  },
  created () {
    for (var i = 0; i < 2; i++) {
      this.productData.push({
        index: i,
        ProductCode: i,
        ProductName: '张三' + i,
        Spec: '开发部门' + i
      })

      this.processData.push({
        index: i,
        ProcedureCode: i,
        ProcedureName: i,
        ProductCode: i,
        ProductName: i,
        Spec: i,
        ProcedureUnitPrice: 2,
        ManHourUnitPrice: 2,
        LossUnitPrice: 2,
        DeductionDefectRate: 2,
        CostingUnit: 2
      })

      this.orderData.push({
        index: i,
        OrderCode: i,
        OrderName: '订单' + i
      })
    }
    // eslint-disable-next-line no-redeclare
    for (var i = 0; i < 30; i++) {
      this.employeesData.push({
        index: i,
        employeesCode: i,
        employees: '张三' + i,
        OrgID: '开发部门' + i
      })
    }
  },
  methods: {
    // 分页器
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    },
    // 新增按钮
    addData () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
      this.$refs['ruleForm2'].resetFields()
      this.ruleForm2.PieceworkCode = 1
      this.ruleForm2.PieceworkDate =
        new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
    },
    // 弹框里搜索人员
    queryEmployees () {},
    // 单击选中人员
    selectPeopleRow (row) {
      this.$refs.employeesTable.toggleRowSelection(row)
    },
    // 修改按钮
    reviseData () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
    },
    // 输入计时算出计时金额
    computedTiming (val) {
      this.ruleForm2.HourlyAmount = val * this.ruleForm2.ManHourUnitPrice
      this.ruleForm2.PieceDefectRate =
        this.ruleForm2.PieceAmount + this.ruleForm2.HourlyAmount - this.ruleForm2.LossAmount
    },
    // 输入计件数量算出计件金额
    computedPiece (val) {
      this.ruleForm2.PieceAmount = val * this.ruleForm2.ProcedureUnitPrice
      this.ruleForm2.PieceDefectRate =
        this.ruleForm2.PieceAmount + this.ruleForm2.HourlyAmount - this.ruleForm2.LossAmount
    },
    // 输入损耗数量计算损耗金额和计件不良率
    computedLose (val) {
      this.ruleForm2.LossAmount = val * this.ruleForm2.LossUnitPrice
      this.ruleForm2.PieceDefectRate = (val / this.ruleForm2.PieceQuantity).toFixed(2)
      this.ruleForm2.PieceDefectRate =
        this.ruleForm2.PieceAmount + this.ruleForm2.HourlyAmount - this.ruleForm2.LossAmount
    },
    // 保存按钮
    saveData () {
      this.$refs['ruleForm2'].valiPieceworkDate(valid => {
        if (valid) {
          if (this.$refs.employeesTable.selection.length !== 0) {
            const children = []
            const data = this.$refs.employeesTable.selection
            this.rightData = []
            if (this.activeName === 'first') {
              // 相同数据批量添加
              for (var i = 0; i < data.length; i++) {
                const obj = {}
                for (var name in this.ruleForm2) {
                  obj[name] = this.ruleForm2[name]
                }
                obj['PieceworkCode'] = 1
                obj['employees'] = data[i].employees
                obj['employeesCode'] = data[i].employeesCode
                obj['OrgID'] = data[i].OrgID
                this.rightData.push(obj)
                children.push(obj)
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              }
            } else if (this.activeName === 'second') {
              // 人员平均分配，即金额平均分配
              for (var j = 0; j < data.length; j++) {
                const obj = {}
                for (var name2 in this.ruleForm) {
                  if (
                    name2 === 'PieceAmount' ||
                    name2 === 'HourlyAmount' ||
                    name2 === 'LossAmount' ||
                    name2 === 'PieceDefectRate'
                  ) {
                    obj[name2] = this.ruleForm2[name2] / data.length
                  } else {
                    obj[name2] = this.ruleForm2[name2]
                  }
                }
                obj['PieceworkCode'] = this.rightData.length + 1
                obj['employees'] = data[j].employees
                obj['employeesCode'] = data[j].employeesCode
                obj['OrgID'] = data[j].OrgID
                this.rightData.push(obj)
                children.push(obj)
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              }
            }
            this.leftData.push({
              index: this.leftData.length + 1,
              PieceworkDate: this.ruleForm2.PieceworkDate,
              PieceQuantity: this.ruleForm2.PieceQuantity,
              totalNumber: data.length,
              children: children
            })
            this.$refs.employeesTable.clearSelection()
          } else {
            this.$message({
              messge: '未选择人员'
            })
          }
          this.disabled1 = true
          this.disabled1 = false
          this.disabled2 = true
        }
      })
    },
    // 撤销按钮
    undoData () {
      this.disabled1 = false
      this.disabled2 = true
      this.$refs['ruleForm2'].resetFields()
    },
    // 点击左边表格展示右边表格数据
    showChildren: function (row) {
      this.rightData = []
      this.rightData = row.children
    },
    // 选中数据
    selectRow (row, index) {
      this.currentRow = row
      this.radio = index
    },
    // 查询产品名称
    getProductData () {
      this.open = 2
      this.Dialog = true
    },
    // 查询工序名称
    getProcessData () {
      this.open = 3
      this.Dialog = true
    },
    // 查询订单
    getOrderData () {
      this.open = 4
      this.Dialog = true
    },
    // 弹框确定按钮
    sure: function () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
      if (this.open === 2) {
        const ProductName = this.currentRow.ProductName
        console.log(ProductName)
        const data = [
          {
            index: 0,
            ProcedureCode: '33',
            ProcedureName: '包装',
            Spec: '200*400',
            ProcedureUnitPrice: 30,
            ManHourUnitPrice: 25,
            LossUnitPrice: 1,
            DeductionDefectRate: 5,
            CostingUnit: '元'
          }
        ]
        this.processData = data
      }
      for (var name in this.currentRow) {
        this.ruleForm2[name] = this.currentRow[name]
      }
      this.Dialog = false
      this.radio = -1
    },
    cancel () {
      this.currentRow = ''
      this.Dialog = false
      this.radio = -1
    },
    // 隐藏表格
    hiddenTable () {
      if (this.showTable === 0) {
        this.showTable = 1
      } else {
        this.showTable = 0
      }
    }
  }
}
</script>
<style scoped>
.collective /deep/ .el-table th {
  background: #b5bdc5;
  color: #fff;
}
.right /deep/ .el-form-item {
  margin-bottom: 10px;
  float: left;
}
.el-table__body tr.current-row > td {
  background: #99caf9;
  color: #fff;
}
.form /deep/ .el-input--suffix .el-input__inner,
.form /deep/ .el-date-editor.el-input,
.form /deep/ .el-date-editor.el-input__inner,
.form /deep/ .el-input.is-disabled .el-input__inner,
.form /deep/ .el-input__inner {
  width: 176px;
}
.right .query /deep/ .el-input--suffix .el-input__inner {
  width: 100px !important;
}

.right .query /deep/ .el-input--mini .el-input__inner {
  width: 100px !important;
}
.right /deep/ .el-input__suffix-inner {
  cursor: pointer;
  color: red;
}
.right /deep/ .el-dialog {
  margin-top: 5vh !important;
}
.right /deep/ .el-table .cell {
  text-align: center;
}
.collective /deep/ .el-tabs__item {
  color: #004ef9 !important;
  cursor: pointer;
  height: 35px;
  width: 180px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 5px;
}
.right /deep/ .el-tabs__item.is-active {
  outline: none;
  color: #fff !important;
  background: #004ef9 !important;
}
.right /deep/.el-tabs__nav {
  margin-left: 30px;
}

.collective /deep/ aside {
  padding: 0 !important;
  line-height: 0 !important;
}
.collective /deep/ .el-main {
  padding: 0 !important;
  line-height: 0 !important;
  border-left: 2px solid #f5f5f5;
}
.collective /deep/ .customWidth {
  margin-top: 5vh !important;
}
.right /deep/ .el-icon-d-arrow-left {
  cursor: pointer;
}
.left /deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #ccc !important;
  color: #fff;
}
</style>
